<script>
import RadarChart from "@/components/RadarChart.vue";
import Exam from "@/components/Exam.vue";
import FloatBtn from "@/components/FloatBtn.vue";
import courseBase from "@/assets/json/CourseBase.json";
import {baseURL, getResourceURL} from "../axiosConfig";
import VTitle from "../components/VTitle.vue";
import docBase from "../assets/json/DocBase.json";

export default {
  components: {
    VTitle,
    RadarChart,
    Exam,
    FloatBtn
  },
  methods: {
    getResourceURL,
    getSvgImage(description, color) {
      // 根据描述和颜色生成对应的SVG图片
      if (color === "pptx") {
        color = "#BD3718";
      } else if (color === "pdf") {
        color = "#B30B00";
      } else if (color === "docx") {
        color = "#134EB3";
      } else if (color === "xlsx") {
        color = "#0E753B";
      }
      const encodedDescription = encodeURIComponent(description);
      const encodedColor = encodeURIComponent(color);
      return `data:image/svg+xml,%3Csvg width='320' height='180' xmlns='http://www.w3.org/2000/svg'%3E%3Ctitle%3EDrawing%3C/title%3E%3Cg%3E%3Ctitle%3ELayer 1%3C/title%3E%3Crect id='svg_3' height='191.07122' width='382.49958' y='-2.5001' x='-5.00017' stroke-width='0' stroke='%23000' fill='${encodedColor}'/%3E%3Ctext transform='matrix(1.28664 0 0 1.28664 -13.9226 -27.9567)' stroke='%23000' xml:space='preserve' text-anchor='start' font-family='Noto Sans JP' font-size='24' id='svg_2' y='97.37594' x='22.47896' stroke-width='0' fill='%23ffffff'%3E${encodedDescription}%3C/text%3E%3Crect id='svg_4' height='2.14285' width='23.21426' y='101.42836' x='113.21399' stroke-width='0' stroke='%23000' fill='${encodedColor}'/%3E%3C/g%3E%3C/svg%3E`;
    },
    getLeida() {
      let radarData = {
        perceive: this.data.perceive,
        innovate: this.data.innovate,
        practice: this.data.practice,
        expression: this.data.expression,
        criticize: this.data.criticize,
      };

      // 在发起请求时使用公共的请求地址
      let res = this.$axios.get(baseURL + ':8080/student/radar/getRadar?' + 'userId=' + this.userId, {
        params: radarData // 传递请求参数
      });

      // 处理异步请求的响应
      res.then(response => {
        // 将数据存储到data数组中
        this.data = [
          response.data.data.perceive.toFixed(2),
          response.data.data.innovate.toFixed(2),
          response.data.data.practice.toFixed(2),
          response.data.data.expression.toFixed(2),
          response.data.data.criticize.toFixed(2),
        ];
        console.log('雷达请求成功:', response);
      }).catch(error => {
        console.log('雷达请求失败:', error.response);
      });
    },

    async getHonor() {
      try {
        // 使用this.$axios发送POST请求
        const response = await this.$axios.post(baseURL + ':8080/student/getHonor');
        this.badgesBase64 = response.data.data;
        console.log(this.badgesBase64); // 处理返回的数据
      } catch (error) {
        console.error(error); // 错误处理
      }
    },

    delayedGetRadarData() {
      setTimeout(() => {
        this.getLeida();
      }, 500);
    }
  },

  mounted() {
// 当组件挂载时，从 localStorage 读取 userId
    this.userId = localStorage.getItem('userId') || 234567;
    // this.getHonor()
  },

  created() {
    if (localStorage.getItem('userId') === null) {
      localStorage.setItem('userId', "234567");
    }
    // 获取从后端获取到的数据
    // setInterval(this.getLeida, 1000);
    this.delayedGetRadarData()
  },

  data() {
    return {
      userId: 123456,
      data: [0, 0, 0, 0, 0], // 初始化data数组为0
      courseItems4DX: courseBase.slice(0, 4),
      courseItems4XY: courseBase.slice(5, 9),
      docItems4DX: docBase.slice(0, 4),
      docItems4XY: docBase.slice(4, 8),
      badgesBase64: "",
    }
  }
}
</script>

<template>
  <div>
    <float-btn/>
    <v-title>个人推荐 - 思议在线学习平台</v-title>

    <div class="row">
      <div class="col-12">
        <div class="row">
          <div class="col-xl-8">
            <card v-if="userId==='123456'">
              <div class="row info" style="min-height: 20rem;">
                <div class="col-lg-12 col-xl-4 info-text" style="width:15rem;margin-top: 2rem">
                  <h2>你好，超大星</h2>
                  <!--                  <h2>;-)</h2>-->
                  <h4>昨天学习很努力，今天也要继续加油</h4>
                  <p class="text-primary">不积跬步，无以至千里</p>
                  <!--                  成就徽章-->
                  <div class="">
                    <h3 class="card-title" style="margin-top: 2rem; display: flex; justify-content:space-between"> 成就徽章
                      <p style="color: #1d8cf8; cursor: pointer; font-size: 14px">更多>></p></h3>
                    <div class="honor">
                      <img alt="完成100道练习"
                           class="honor-badge"
                           src="../assets/img/00007-1951701925-_lora_badge_1_ (masterpiece),(best quality),(ultra-detailed),badge,An imaginative and unique achievement badge for solving 100 q.png">
                      <img alt="连续登录100天"
                           class="honor-badge"
                           src="../assets/img/00012-1951701925-_lora_badge_1_ (masterpiece),(best quality),(ultra-detailed),badge，_A modern and creative achievement badge for 100 consecutive.png">
                    </div>
                  </div>
                </div>
                <div class="col-lg-12 col-xl-8 info-chart" style="width: 100%">
                  <radar-chart :chartData="data" style="margin-left: calc(50% - 290px);margin-top:auto"></radar-chart>
                </div>
              </div>
            </card>
            <card v-else-if="userId==='234567'">
              <div class="row info" style="min-height: 20rem;">
                <div class="col-lg-12 col-xl-4 info-text" style="width:20rem;margin-top: 2rem">
                  <h2>你好，思小议</h2>
                  <!--                  <h2>(ง •̀_•́)ง‼</h2>-->
                  <h4 style="min-width: 20rem">好久不见，今天要更加努力才行啊！</h4>
                  <p class="text-primary">不畏过往，不惧将来</p>
                  <!--                  成就徽章-->
                  <div class="">
                    <h3 class="card-title"
                        style="margin-top: 2rem; display: flex; justify-content:space-between; margin-bottom: 0"> 成就徽章
                      <p style="color: #1d8cf8; cursor: pointer; font-size: 14px">更多>></p></h3>
                    <div class="honor">
                      <!--                      <img v-if="badgesBase64!==''"-->
                      <!--                           class="honor-badge img-loading_animate"-->
                      <!--                           :src="'data:image/jpg;base64,'+ badgesBase64" />-->
                      <!--                      <img v-else class="honor-badge img-loading_animate"-->
                      <!--                           src="../assets/img/loading3.gif"-->
                      <!--                           alt="">-->
                      <img alt="完成100道练习"
                           title="完成100道练习"
                           class="honor-badge"
                           src="../assets/img/00007-1951701925-_lora_badge_1_ (masterpiece),(best quality),(ultra-detailed),badge,An imaginative and unique achievement badge for solving 100 q.png">
                      <img alt="有30天在22:00以后学习"
                           title="有30天在22:00以后学习"
                           class="honor-badge"
                           src="../assets/img/00010-1951701925-_lora_badge_1_ (masterpiece),(best quality),(ultra-detailed),badge，_An imaginative and celestial-themed achievement badge for lo.png">
                      <img alt="完成30道错题"
                           title="完成30道错题"
                           class="honor-badge"
                           src="../assets/img/00013-1951701925-_lora_badge_1_ (masterpiece),(best quality),(ultra-detailed),badge，_An imaginative and prestigious achievement badge for complet.png">
                    </div>
                  </div>

                </div>
                <div class="col-lg-12 col-xl-8 info-chart" style="width: 100%">
                  <radar-chart :chartData="data" style="margin-left: calc(50% - 290px);margin-top:auto"></radar-chart>
                </div>
              </div>
            </card>
          </div>
          <div class="col-xl-4">
            <card>
              <div style="height: 20rem;">
                <h3 class="card-title"> 错题重做</h3>
                <Exam @get-leida="delayedGetRadarData()"></Exam>
              </div>
            </card>
          </div>
        </div>

        <div style="height: auto;">
          <h3 class="card-title"><i class="tim-icons icon-puzzle-10" style="margin-bottom: 5px;"></i> 我的课程</h3>
          <div class="row">
            <div v-for="item in courseItems4DX " v-if="userId==='123456'" :key="item.id"
                 class="col-lg col-xs-6 card-parent">
              <card class="card" style="width: 20rem;margin: auto;">
                <a :href="'#/detail/course/' + item.id">
                  <img slot="image" :src="getResourceURL(item.img)" alt="Card image cap" class="card-img-top"
                       style="border: 2px solid rgba(210,210,210,0.63);border-radius: 5px">
                  <h4 class="card-text description">{{ item.title }}</h4>
                  <p class="card-text description">{{ item.subDescription3 }}</p>
                </a>
              </card>
            </div>
            <div v-for="item in courseItems4XY " v-if="userId==='234567'" :key="item.id"
                 class="col-lg col-xs-6 card-parent">
              <card class="card" style="width: 20rem;margin: auto;">
                <a :href="'#/detail/course/' + item.id">
                  <img slot="image" :src="getResourceURL(item.img)" alt="Card image cap" class="card-img-top"
                       style="border: 2px solid rgba(210,210,210,0.63);border-radius: 5px">
                  <h4 class="card-text description">{{ item.title }}</h4>
                  <p class="card-text description">{{ item.subDescription3 }}</p>
                </a>
              </card>
            </div>
          </div>
        </div>
        <div style="height: auto;margin-top: 2rem">
          <h3 class="card-title"><i class="tim-icons icon-puzzle-10" style="margin-bottom: 5px;"></i> 辅学资源</h3>
          <div class="row">
            <div v-for="item in docItems4DX " v-if="userId==='123456'" :key="item.id"
                 class="col-lg col-xs-6 card-parent">
              <card class="card" style="width: 20rem;margin: auto;">
                <a :href="'#/detail/doc/' + item.id">
                  <img :alt="item.title" :src="getSvgImage(item.title,item.type)" class="card-img-top"/>
                  <h4 class="card-text description">{{ item.title + '.' + item.type }}</h4>
                </a>
              </card>
            </div>
            <div v-for="item in docItems4XY " v-if="userId==='234567'" :key="item.id"
                 class="col-lg col-xs-6 card-parent">
              <card class="card" style="width: 20rem;margin: auto;">
                <a :href="'#/detail/doc/' + item.id">
                  <img :alt="item.title" :src="getSvgImage(item.title,item.type)" class="card-img-top"/>
                  <p class="card-text description">{{ item.title }}</p>
                </a>
              </card>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.card-title {
  margin-bottom: 0.2rem !important;
  font-weight: 400 !important;
}

radar-chart {
  margin: auto;
  height: 15rem !important;
  display: block;
}

.description {
  margin-top: 1rem;
  max-height: 125px;
  overflow-y: auto;
}

.info {
  margin-left: 2vw;
}

.info-text {
  min-width: 3rem;
}

@media screen and (max-width: 1319px) {
  .info {
    height: auto;
  }

  .info-chart {
    margin: auto;
  }
}

@media screen and (min-width: 1320px) {
  .info {
    height: 20rem;
  }

  .info-chart {
    margin: auto !important;
  }
}

.honor-badge {
  width: 70px;
  height: 70px;
}

.honor {
  display: flex;
  justify-content: space-between;
  margin-top: 1rem;
  width: 100%;
}
</style>
